
<template>
  <div class="login">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      class="demo-ruleForm"
      @submit.native.prevent
    >
      <div>
        <el-form-item prop="phone">
          <el-input
            :key="1"
            v-model="ruleForm.phone"
            autocomplete="on"
            placeholder="手机号"
          >
            <el-select
              slot="prefix"
              style="z-index: 10000"
              size="small"
              v-model="value"
              placeholder="请选择"
              :popper-append-to-="false"
            >
              <el-option
                popper-class="dropdown__item"
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.value
                }}</span>
              </el-option>
            </el-select>
          </el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
 
<script>
import securityService from "@/services/authentication/securityService";
import * as personlApi from "@/api/request/personlApi";
//
export default {
  props: ["sourcePhone", "isModifi"],
  created() {},
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|6|7|8|9]\d{9}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("您输入的手机号格式有误,请重新输入"));
        }
      }
    };
    return {
      params: {
        phoneNumber: "",
        token: "",
      },
      show: true, // 初始启用按钮

      ruleForm: {
        phone: "",
      },
      rules: {
        phone: [{ validator: checkPhone, trigger: "blur" }],
      },

      options: [
        {
          value: "中国大陆",
          label: " +86",
        },
        {
          value: "香港",
          label: "+852",
        },
        {
          value: "台湾",
          label: "+886",
        },
        {
          value: "美国",
          label: "+1",
        },
        {
          value: "英国",
          label: "+44",
        },
        {
          value: "日本",
          label: "+81",
        },
        {
          value: "俄罗斯",
          label: "+7",
        },
        {
          value: "意大利",
          label: "+39",
        },
      ],
      value: "中国大陆",
    };
  },

  methods: {
    async GetChangePhoneToken() {
      let { data, status } = await personlApi.GetChangePhoneToken(
        this.ruleForm.phone
      );
      this.params.token = data.toString();
      this.params.phoneNumber = this.ruleForm.phone;
      if (!status === 200) {
        this.$notify({
          customClass: "notify-error", //  notify-success ||  notify-error
          message: `修改失败!`,
          showClose: false,
          duration: 1000,
        });
      }
    },
    async ChangePhoneNumber() {
      let { status } = await personlApi.ChangePhoneNumber(this.params);
      if (status === 200) {
        this.$notify({
          customClass: "notify-success", //  notify-success ||  notify-error
          message: `修改成功!`,
          showClose: false,
          duration: 1000,
        });
        securityService.signOut(location.href);
      } else {
        this.$notify({
          customClass: "notify-error", //  notify-success ||  notify-error
          message: `修改失败!`,
          showClose: false,
          duration: 1000,
        });
      }
    },
    submitForm() {
      this.GetChangePhoneToken().then((val) => {
        this.ChangePhoneNumber();
      });
    },
  },
  computed: {
    pannelShow() {
      return this.$store.state.isRightPanelShow;
    },
  },
  watch: {
    pannelShow() {
      this.$refs.ruleForm.clearValidate();
      (this.ruleForm = {
        phone: "",
      }),
        (this.show = true);
    },
  },
};
</script>

<style>
.el-autocomplete-suggestion {
  width: 150px;
}
.el-select .el-input__inner {
  border: none;
  padding: 0;
  padding-left: 5px;
  height: 30px;
}
.el-select {
  width: 70px;
}
.dropdown__item {
  width: 150px;
}
.el-input--small .el-input__icon {
  line-height: 30px;
}
.el-input--prefix .el-input__inner {
  padding-left: 100px;
}
.el-scrollbar__wrap {
  width: 150px;
}
</style>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.el-form /deep/ .el-form-item {
  margin-bottom: 30px;
}
.el-form-item.is-error /deep/ .el-input__inner {
  border-color: #e5e5e5;
}
// .el-form  .el-select-dropdown .el-select-dropdown__item.selected{
//     background: #00c1de;
// }
// .el-form .el-select-dropdown .el-select-dropdown__item.selected span{
//      color: #fff !important;
// }
// .el-form  .el-select-dropdown .el-select-dropdown__item span{
//     color: #262626 !important;
//     font-size: 14px;
// }

.verification-code {
  position: relative;
}
.verification-code .el-button:hover,
.verification-code .el-button.is-disabled {
  background: transparent;
}
.verification-text {
  position: absolute;
  top: 1px;
  bottom: 1px;
  right: 1px;
  border: none;
  color: $--color-primary;
  font-weight: 400;
  padding: 0 10px;
}
.count {
  color: #8c8c8c;
}
</style>